<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>选择车型-去保养-氦修驿站旗下品牌</title>
    <meta name="keywords" content="汽车保养,汽车配件,汽车维修,养车无忧,养车,4S店品质,氦修驿站,丰田保养" />
    <meta name="description" content="100%正品配件,4S店一半价格,先行赔付,闪电送达!线上购买配件,线下提供安装.上万用户的最佳选择!去掉中间环节,直接从源头采购配件!" />
	<link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/css/base.css">
    <link rel="stylesheet" type="text/css" href="{:C('WEB_URL')}Public/css/baoyang.css">
</head>
<body>

    <include file="Public:header" />

    <div id="wrap">
        <div class="title">
            <h2>预约保养</h2>
            <p class="step">
                <em class="current">1、选择车型</em><i>&#xe606;</i>
                <em>2、选择服务</em><i>&#xe606;</i>
                <em>3、选择维修厂</em><i>&#xe606;</i>
                <em>4、确认信息</em>
            </p>
        </div>

        <div class="brandList" id="J_brandList" <notempty name="_GET['brand_id']"> style="display:none;" </notempty> >
            <p class="letterList">
                品牌首字母选择：
                <a href="javascript:void(0)" data-val="ALL" class="current">全部</a>
                <a href="javascript:void(0)" data-val="A">A</a>
                <a href="javascript:void(0)" data-val="B">B</a>
                <a href="javascript:void(0)" data-val="C">C</a>
                <a href="javascript:void(0)" data-val="D">D</a>
                <a href="javascript:void(0)" data-val="E">E</a>
                <a href="javascript:void(0)" data-val="F">F</a>
                <a href="javascript:void(0)" data-val="G">G</a>
                <a href="javascript:void(0)" data-val="H">H</a>
                <a href="javascript:void(0)" data-val="I">I</a>
                <a href="javascript:void(0)" data-val="J">J</a>
                <a href="javascript:void(0)" data-val="K">K</a>
                <a href="javascript:void(0)" data-val="L">L</a>
                <a href="javascript:void(0)" data-val="M">M</a>
                <a href="javascript:void(0)" data-val="N">N</a>
                <a href="javascript:void(0)" data-val="O">O</a>
                <a href="javascript:void(0)" data-val="P">P</a>
                <a href="javascript:void(0)" data-val="Q">Q</a>
                <a href="javascript:void(0)" data-val="R">R</a>
                <a href="javascript:void(0)" data-val="S">S</a>
                <a href="javascript:void(0)" data-val="T">T</a>
                <a href="javascript:void(0)" data-val="U">U</a>
                <a href="javascript:void(0)" data-val="V">V</a>
                <a href="javascript:void(0)" data-val="W">W</a>
                <a href="javascript:void(0)" data-val="X">X</a>
                <a href="javascript:void(0)" data-val="Y">Y</a>
                <a href="javascript:void(0)" data-val="Z">Z</a>
            </p>
            <ul>
                <volist name="auto" id="vo">
                <li class="J_letter_{$vo['letter']}" onclick="chooseAuto.getAuto('{$vo['brand_id']}',1)">
                    <img src="/{$vo['brand_logo']}" />
                    <p>{$vo['brand_name']}</p>
                </li>

                </volist>
            </ul>
            <p class="clearfix"></p>
        </div>

        <div class="autoList hide" id="J_autoList">
            <div class="selected">
                已选车型：<span id="J_selected"></span>
            </div>

            <div class="listMain">
                <p>请选择您爱车的车型：</p>
                <ul></ul>
            </div>
            <div class="listMain">
                <p>请选择您爱车的排量：</p>
                <ul></ul>
            </div>
            <div class="listMain">
                <p>请选择您爱车的生产年份：</p>
                <ul></ul>
            </div>
            <p class="clearfix"></p>
        </div>
    </div>
    <include file="Public:footer" />
    <include file="Public:loginReg" />
    <script>

    var chooseAuto={
        init:function(){
            $(".letterList").on("click",function(e){
                if(e.target.tagName=="A"){
                    var element=$(e.target),
                        letter=element.attr("data-val");
                    element.addClass("current").siblings("a").removeClass("current");
                    
                    if(letter=="ALL"){
                        $("#J_brandList").find("li").show();
                    }else{
                        $("#J_brandList").find("li").hide();
                        $(".J_letter_"+letter).show();
                    }
                    
                }
            })

            $("#J_selected").on("click",function(e){
                if(e.target.tagName==="A"){
                    var element=$(e.target).parent();
                        index=element.index();

                    if(index==0){
                        $("#J_brandList").show();
                        $("#J_autoList").hide();
                        
                    }else{
                        element.remove();
                        $("#J_autoList").find(".listMain").hide().eq(index*1-1).show();
                    }

                    //清除从首页传递过来的车型数据
                    clearCookie("brand_id");
                    clearCookie("autoId");
                    
                }
            })

            var brand_id=getCookie("brand_id");

            if(brand_id!=null){
                chooseAuto.getAuto(brand_id,1,"homeTo");
            }
        },

        //选择车型  step=0：查品牌；step=1：查车型；step=2:查排量；step=3:查年份
        chooseAutoCurrent:{"brand_id":"","model_name":"","model_pl":"","model_year":""},
        getAuto:function(id,step,brand_id){
            if(id==""){
                return false;
            }
            //计算每一步需要查询的条件
            var arr=["brand_id","model_name","model_pl","model_year"],
                _t=this,
                data={};
            if(step==0){
                this.chooseAutoCurrent={"brand_id":"","model_name":"","model_pl":"","model_year":""};
            }else{
                this.chooseAutoCurrent[arr[step-1]]=id;
            }

            if(typeof brand_id!="undefined"&&brand_id!="homeTo"){
                this.chooseAutoCurrent["brand_id"]=brand_id;
            }

            for(var i=0;i<=step;i++){
                if(this.chooseAutoCurrent[arr[i]]!=""&&i<step){
                    data[arr[i]]=this.chooseAutoCurrent[arr[i]];
                }
            }

            var url="{:U('getAuto')}";

            $.ajax({
                type:"post",
                dataType:"json",
                url:url,
                data:data,
                success:function(res){
                    var html="";
                    if(res.data==null||res.data==false){
                        alert("抱歉，该品牌的车型正在完善中！");
                        return false;
                    }else{
                        html=_t.getAutoListHtml(res.data,step);
                        if(step==1||typeof brand_id!="undefined"){
                            $("#J_selected").html('<em>'+res.data[0]['brand_name']+'<a href="javascript:void(0)">×</a></em>');
                        }

                        if(step==2){
                            $("#J_selected").append('<em>'+res.data[0]['model_name']+'<a href="javascript:void(0)">×</a></em>');
                        }else if(step==3){
                            $("#J_selected").append('<em>'+res.data[0]['model_pl']+'<a href="javascript:void(0)">×</a></em>');
                        }else if(step==4){
                            $("#J_selected").append('<em>'+res.data[0]['model_year']+'<a href="javascript:void(0)">×</a></em>');
                        }
                        //切换界面
                        $("#J_brandList").hide();
                        $("#J_autoList").show().find(".listMain").hide()
                        $("#J_autoList").show().find(".listMain").eq(step*1-1).show().find("ul").html(html);

                        //从首页带入品牌时自动获取车型
                        if(brand_id=="homeTo"){
                            var brand_name=getCookie("auto");
                            if(brand_name!=null){
                                chooseAuto.getAuto(brand_name,2);
                            }
                        }
                    }
                }
            })
        },
        //转换车型数据成HTML
        getAutoListHtml:function(data,step){

            var arr=["brand_id","model_name","model_pl","model_year"],
                html="",
                arrTemp={},
                len=data.length,
                i=0;

            for(;i<len;i++){
                if(typeof arrTemp[data[i][arr[step]]]=="undefined"){
        
                    var even=step!=3?"chooseAuto.getAuto('"+data[i][arr[step]]+"',"+(step+1)+")":"chooseAuto.confirmAuto('"+data[i]["model_id"]+"')";
                    html+="<li onclick=\""+even+"\">"+data[i][arr[step]]+"</li>";
                    arrTemp[data[i][arr[step]]]=true;
                }
                
            }
            
            return html;
        },
        confirmAuto:function(id){
            console.log(id);
            window.location.href="/baoyang/step2.html?id="+id;
        }
    }
    chooseAuto.init();
    </script>
    

</body>
</html>